<!DOCTYPE   html>
<html   lang="en">
<head>
<base href="/FirstWeb/WebPages/chapter09/system/src/">
       <meta   charset="UTF-8">
       <meta   name="viewport"   content="width=device-width,   initial-scale=1.0">
       <title>添加用户信息</title>
       <style>
           body  {
               font-family:  Arial,  sans-serif;
               background-color:  #f2f2f2;
           }

           h1  {
           		text-align:center;
               color:  #333eee;
               font-size:  2em;
               margin-bottom:  1em;
           }

           form  {
               width: 50%;
               margin:  0  auto;
               padding:  20px;
               background-color:  #fffeee;
               border-radius:  5px;
               box-shadow:  0  2px  5px  rgba(0,  0,  0,  0.1);
           }

           label  {
               display:  block;
               margin-bottom:  5px;
           }

           input,  select,  textarea  {
               width:  96%;
               padding:  10px;
               margin-bottom:  20px;
               border:  1px  solid  #ccc;
               border-radius:  3px;
           }
           input[type="radio"]  {
               margin-right:  10px;
               width:  20px;
               display: inline-block;
           }
           label{
           	display: inline-block;
           }
           

           button[type="submit"]  {
               width:  100%;
               padding:  10px;
               background-color:  #007bff;
               color:  #fff;
               border:  none;
               border-radius:  3px;
               cursor:  pointer;
           }

           button[type="submit"]:hover  {
               background-color:  #0056b3;
           }
       </style>
</head>
<body>
       <h1>信息表单</h1>
       <form action="/FirstWeb/addUser.do" method="Post">
            <label for="username">用户名：</label>
           <input type="text" id="username" name="username" required><br>
			
			<label for="password">密码：</label>
           <input type="password" id="password" name="password" required><br>
			
            <label for="phone">电话号码：</label>
           <input type="phone" id="phone" name="phone" required><br>
			
			<label for="email">邮箱：</label>
           <input type="email" id="email" name="email" required><br>
			
			<label for="QQ">QQ：</label>
           <input type="QQ" id="QQ"   name="QQ" required><br>
			
			<label for="weixin">微信：</label>
           <input type="weixin" id="weixin" name="weixin" required><br>
			
			<label for="address">地址：</label>
           <input type="address" id="address" name="address" required><br>
			
           <label for="age">年龄：</label>
           <select id="age" name="age" required>
               <option value="18">18岁</option>
               <option value="19">19岁</option>
               <option value="20">20岁</option>
               <option value="21">21岁</option>
               <option value="22">22岁</option>
               <option value="23">23岁</option>
               <option value="24">24岁</option>
               <option value="25">25岁</option>
               <option value="26">26岁</option>
           </select><br><br>

           <label for="sex">性别：</label>
           <input type="radio" id="male" name="sex" value="男" required>
           <label for="male">男</label>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <input type="radio" id="female" name="sex" value="女" required>
           <label for="female">女</label><br><br>

           <label for="remark">备注：</label>
           <textarea id="remark" name="remark" cols="30" rows="10" required></textarea><br><br>

           <input type="submit" style="background-color:rgb(50, 100, 150, 0.5);text-align:center;" value="提交">
       </form>
</body>
</html>